<template>
    <div class="container">
        <Form :model="formTop" label-position="top">
        <div class="title">
            <div class="sub-title">
                <span>确诊和无症状人员信息</span>
                <div class="group">
                    <Input search placeholder="请输入身份证号或护照号" v-model="formTop.input0" style="width: 280px;"/>
                    <div class="history">查看数据库 <Icon type="md-link" /></div>
                </div>
            </div>
        </div>
            <div class="sub-content">
                <Row :gutter="20">
                    <Col span="8">
                        <FormItem label="姓名">
                            <Input v-model="formTop.input1"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="性别">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in sexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="年龄">
                            <Input v-model="formTop.input2"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="证件类型">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in cardType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="证件号码">
                            <Input v-model="formTop.input3"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="联系电话">
                            <Input v-model="formTop.input4"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <div class="title">
                <div class="sub-title"><span>人员详情信息</span></div>
            </div>
            <div class="sub-content">
                <Row :gutter="8">
                    <Col span="8">
                        <FormItem label="所属国籍">
                            <Input v-model="formTop.input2"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="所属省">
                            <Input v-model="formTop.input2"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="所属市">
                            <Input v-model="formTop.input2"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="所属区县">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in glType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="人群分类">
                            <Input v-model="formTop.input2"></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="病例分类">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in illList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="发病日期">
                            <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="诊断时间">
                            <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="收治医院">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in hopitalList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="入院时间">
                            <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="临床严重程度">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in deepList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="是否输入病例">
                            <Select v-model="model1" style="width:100%">
                                <Option v-for="item in isList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="入境前居住或旅行的国家或地区">
                            <Input v-model="formTop.input2"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="治愈出院日期">
                            <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="解除隔离时间">
                            <DatePicker type="date" placeholder="Select date" style="width: 100%;"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
            </div>
            <div class="btn-op">
                <Button type="warning">提交信息</Button>
            </div>
        </Form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      formTop: {
        input0: '请输入身份证号',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        // input5: '',
        // input6: '',
        // input7: '',
        // input8: '',
        // input9: '',
        // input10: '',
        // input11: '',
        input12: ''
        // input13: '',
        // input14: '',
        // input15: '',
        // input16: '',
        // input17: '',
        // input18: ''
      },
      glType: [
        {
          value: '市本级',
          label: '市本级'
        },
        {
          value: '和平区',
          label: '和平区'
        },
        {
          value: '沈河区',
          label: '沈河区'
        },
        {
          value: '铁西区',
          label: '铁西区'
        },
        {
          value: '皇姑区',
          label: '皇姑区'
        },
        {
          value: '大东区',
          label: '大东区'
        },
        {
          value: '浑南区',
          label: '浑南区'
        },
        {
          value: '于洪区',
          label: '于洪区'
        },
        {
          value: '沈北新区',
          label: '沈北新区'
        },
        {
          value: '苏家屯区',
          label: '苏家屯区'
        },
        {
          value: '辽中区',
          label: '辽中区'
        },
        {
          value: '新民市',
          label: '新民市'
        },
        {
          value: '法库县',
          label: '法库县'
        },
        {
          value: '康平县',
          label: '康平县'
        }
      ],
      hopitalList: [
        {
          value: '沈阳市传染病医院',
          label: '沈阳市传染病医院'
        }
      ],
      deepList: [
        {
          value: '普通型',
          label: '普通型'
        },
        {
          value: '无症状感染者',
          label: '无症状感染者'
        },
        {
          value: '重型',
          label: '重型'
        }
      ],
      illList: [
        {
          value: '确诊病例',
          label: '确诊病例'
        },
        {
          value: '阳性检查',
          label: '阳性检查'
        }
      ],
      isList: [
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }
      ]
    }
  }
}
</script>

<style scoped>
    .title {
        padding: 20px 0;
        border-bottom: 1px solid #efefef;
    }
    .sub-title {
        border-left: 7px solid darkred;
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-content {
        border: 10px solid #efefef;
        padding: 20px 20px 0 20px;
    }
    .btn-op {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .history {
        color: darkred;
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 12px;
    }
    .group {
        display: flex;
    }
</style>
